<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background: url("../案例二/img/bg.png");
        }
        .cl{
            width: 30%;
            margin: auto;
            text-align: center;
            background: beige;
        }
        .cl2{
            margin-left: 90px;
            text-align: left;
        }
        input{
            height: 20px;
            margin-top: 2px;
        }
       .cl3{
           margin-left: 21px;
           text-align: left;
       }
        #signature{
            width: 300px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div>
        <h2 style="color: red">黑马头条</h2>
    </div>
    <div class="cl">
        <font color="#8b008b">
            注册详情
        </font>
        <hr/>
        <form action="#" method="get" >
            <label for="userName">姓名:</label>&nbsp;&nbsp;
            <input type="text" name="userName" placeholder="请输入姓名" id="userName">
            <br/>
            <label for="mailbox">邮箱:</label>&nbsp;&nbsp;
            <input type="text" name="mailbox" placeholder="请输入邮箱" id="mailbox">
            <br/>
            <label for="phone">手机:</label>&nbsp;&nbsp;
            <input type="text" name="phone" placeholder="请输入姓名" id="phone">
            <br/>
            <label for="passWord">密码:</label>&nbsp;&nbsp;
            <input type="text" name="passWord" placeholder="请输入姓名" id="passWord">
            <br/>
            <hr/>
            <div class="cl2">
                性别:
                <input type="radio" name="gender" value="boy">男
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="girl">女
                <br/>
                爱好:
                <input type="checkbox" value="music">音乐
                <input type="checkbox" value="movie">电影
                <input type="checkbox" value="game">游戏
                <br/>
                <label for="dateBirth">出生日期:</label>
                <input type="date" id="dateBirth" value="date">
                <br/>
                <label for="address">所在地区:</label>
                <select id="address" name="address" >
                    <option value="0" disabled selected hidden>请选择你所属的城市</option>
                    <option value="1">中央</option>
                    <option value="2">北京</option>
                    <option value="3">南京</option>
                    <option value="4">东京</option>
                    <option value="5">西京</option>
                    <option value="6">天堂</option>
                </select>
            </div>
            <hr/>
            <div class="cl3">
                <label for="signature">个性签名</label>
                <textarea id="signature" placeholder="写下您的与众不同!"></textarea>
            </div>
            <hr/>

            <div>
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </div>
        </form>
    </div>
</body>
</html>